<template lang="pug">
  .rate
    el-dialog(
      title="商品评价",
      :visible.sync="showModal",
      top="10vh",
      width="30%",
      :before-close="beforeCloseHandler")

      Rate(ref="rateWrap")

      span(slot="footer", class="dialog-footer")
        el-button(size="mini", @click="closeModal") 取 消
        el-button(size="mini", type="primary", @click="submitRating") 提 交
</template>

<script>
import Rate from '@/components/Rating/rate'
import modalMixin from '@/mixins/modal'
export default {
  name: 'rateModal',
  mixins: [modalMixin],
  data() {
    return {
      orderItem: null
    }
  },
  methods: {
    showRating(item) {
      this.orderItem = item
      this.openModal()
    },
    submitRating() {
      let rate = this.$refs.rateWrap
      if(!rate.message) {
        this.$vgo.tip('请填写评论内容')
        return
      }
      let options = {
        productId: this.orderItem.orderitems[0].fk_productid,
        orderId: this.orderItem.orderitems[0].fk_orderid,
        contents: rate.message,
        serviceScore: rate.serviceScore,
        productScore: rate.productScore,
        postScore: rate.postScore
      }
      this.$store.dispatch('orderRating', options)
      this.hide()
    },
    hide() {
      let rate = this.$refs.rateWrap
      rate.serviceScore = null
      rate.productScore = null
      rate.postScore = null
      rate.message = ''
      this.closeModal()
    }
  },
  components: {
    Rate
  }
}
</script>

<style lang="stylus">
.rate
  .rate-body
    .rate-box
      padding: 20px
      .rate-item
        display: flex
        margin-bottom: 10px
        & > div
          flex: 1
        .rate-label
          display: block
          width: 60px
          flex: 0 0 60px
          font-size: 13px
    .ratings-input
      border-top: 1px solid rgba(7, 17, 27, 0.1)
</style>
